<template>
  <div class="con">
    <div class="box">
      <div class="left">
        <h3 style="margin-top: 20px; margin-left: 20px">
          舆情监控系统后台管理-IT营
        </h3>
        <a-form
          :form="form"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 10 }"
          style="margin-top: 30px"
        >
          <a-form-item label="用户名 : ">
            <a-input v-model="form.username" />
          </a-form-item>
          <a-form-item label="密码 : ">
            <a-input v-model="form.password" type="password" />
          </a-form-item>
          <a-form-item label="验证码 : ">
              <a-input style="width: 100px" v-model="form.verify" />
              <p class="yanzheng" v-html="svgImg"></p>
          </a-form-item>
        </a-form>
        <img style="margin-left: 75px" @click="getLogin" src="../assets/login_btn.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 2,
      form: {
        username: "",
        password: "",
        verify:"",
        svgKey: "",
      },
      svgImg: "",
    };
  },
  mounted() {
    this.getYanzheng();
  },
  methods: {
    async getYanzheng() {
      let res = await this.$axios.get("/api/captcha");
      console.log(res);
      this.svgImg = res.data.svgImg;
      this.form.svgKey=res.data.svgKey
    },
    async getLogin(){
        let res = await this.$axios.post("/api/doLogin",this.form);
        console.log(res);
        if(res.data.message=="用户登录成功"){
            this.$router.push('/home')
        }else{
            alert("登录失败")
        }
    }
  },
};
</script>

<style scoped >
.con {
  width: 100%;
  height: 700px;
  background-color: cornflowerblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 800px;
  height: 400px;
  /* background-color: transparent; */
  background-image: url("../assets/loginbg.jpg");
  background-size: 100% 100%;
}
.yanzheng{
    position: absolute;
    top: -20px;
    left: 120px;
}
</style>